import React from "react";
import {Button as AntButton, Col, Image, Row, Upload} from "antd";
import {commonUpload} from "@/util/FileUtil";
import {DeleteOutlined, EyeOutlined} from "@ant-design/icons";
import unknown from "@/static/unknown.png";
import PropTypes from "prop-types";

/**
 * 图片上传专用组件
 * @param props
 * @returns {JSX.Element}
 * @constructor
 */
const ImageUpload = (props) => {
    const {fileList, width, height, onDelete, placeholder, shouldKnow, that} = props
    let BigFontSize = `calc( ${width}px * 0.15)`
    let NormalFontSize = `calc( ${width}px * 0.05)`
    return <>
        {
            fileList.length === 0 ?
                <Upload
                    fileList={fileList}
                    listType={'picture'}
                    maxCount={1}
                    showUploadList={false}
                    accept=".png, .jpg, .jpeg, .bmp, .svg"
                    customRequest={(options) => commonUpload(that, options)}
                >
                    <AntButton type="dashed" style={{width, height, userSelect: 'none'}}>
                        <p style={{fontSize: BigFontSize, fontWeight: '100'}}>
                            +
                        </p>
                        {placeholder}
                        <p style={{fontSize: NormalFontSize, color: "#999"}}>{shouldKnow}</p>
                    </AntButton>
                </Upload>
                :
                <Image width={200}
                       preview={{
                           mask: <>
                               <Row gutter={[16, 16]}>
                                   <Col span={12}>
                                       <EyeOutlined/> 预览
                                   </Col>
                                   <Col span={12}>
                                       <p onClick={(e) => onDelete(e)}><DeleteOutlined/> 删除</p>
                                   </Col>
                               </Row>
                           </>
                       }}
                       height={200}
                       src={fileList.length > 0 ? fileList[0].imgUrl : unknown}
                />
        }
    </>
}

/* 属性校验 */
ImageUpload.propTypes = {
    fileList: PropTypes.array,
    width: PropTypes.number,
    height: PropTypes.number,
    onDelete: PropTypes.func,
    placeholder: PropTypes.string,
    shouldKnow: PropTypes.string
}

/* 默认值 */
ImageUpload.defaultProps = {
    fileList: [],
    width: 150,
    height: 150,
    onDelete: null,
    placeholder: "点击上传文件",
    shouldKnow: ""
}

export default ImageUpload;
